<template>
  <el-dialog :title="isPost==='post'?'添加仓库':'编辑仓库' " :destroy-on-close="true" :before-close="onCancel"
             :visible.sync="visible" width="600px">
    <template>
      <el-form :model="form" ref="formRef" label-width="auto" :rules="rules">
        <el-form-item label="仓库名称：" prop="name" style="width: 85%">
          <el-input v-model="form.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="仓库管理员：" prop="user_ids" style="width: 85%">
          <PrincipalSelect ref="principalSelectRef" v-model="form.user_ids" :limit="true"
                           :custom-options="principalOptions" placeholder="请选择仓库管理员"/>
        </el-form-item>
        <el-form-item label="限制部门：" prop="dept_ids" style="width: 85%">
          <!--                    <TreeSelect-->
          <!--                      v-model="form.dept_ids"-->
          <!--                      :options="deptOptions"-->
          <!--                      placeholder="请选择所属部门"-->
          <!--                      :defaultExpandLevel="3"-->
          <!--                      :normalizer="(d)=>{return { id: d.id, label: d.name,children:d.children||undefined }}"/>-->
          <SelectTree v-model="form.dept_ids" :treeData="deptOptions"/>
        </el-form-item>
        <el-form-item label="仓库所在省市区：" prop="address1" style="width: 85%">
          <div class="area">
            <City @areaChange="areaChange" :ids="cityName" v-if="visible"/>
          </div>
        </el-form-item>
        <el-form-item label="仓库详细地址：" prop="address" style="width: 85%">
          <el-input v-model="form.address" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
    </template>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onCancel">取 消</el-button>
      <el-button type="primary" @click="onConfirm" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import City from '@/components/city'
import PrincipalSelect from "@/views/project/task/components/PrincipalSelect.vue";
// import TreeSelect from '@riophae/vue-treeselect' // 下拉树
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import SelectTree from "@/views/bom/storehouse/components/SelectTree.vue";

export default {
  name: "add-dialog",
  components: {
    SelectTree,
    City,
    PrincipalSelect
  },
  data() {
    return {
      isPost: 'post',
      cityName: "",
      loading: false,
      visible: false,
      form: {
        name: '',
        user_ids: [],
        dept_ids: [],
        address1: [],
        address: ''
      },
      rules: {
        name: [
          {required: true, message: '仓库名为必需', trigger: 'input'}
        ],
        user_ids: [
          {required: true, message: '仓库负责人为必需', trigger: 'input'}
        ],
        dept_ids: [
          {required: false, message: '限制部门为必需', trigger: 'input'}
        ],
        address1: [
          {required: true, message: '限制部门为必需', trigger: 'input'}
        ],
        address: [
          {required: true, message: '限制部门为必需', trigger: 'input'}
        ],
      },
      principalOptions: [],
      deptOptions: [],
    }
  },
  mounted() {
    this.handleGetDeptList()
  },

  methods: {
    /*省市区选择*/
    areaChange(val) {
      this.form.address1 = val
    },

    onActive(row) {
      this.visible = true;
      if (row) {
        const {
          name,
          users,
          depts,
          province_id,
          province_name,
          city_id,
          city_name,
          county_id,
          county_name,
          address,
          id
        } = JSON.parse(JSON.stringify(row))
        this.cityName = province_name + '/' + city_name + '/' + county_name;
        this.id = id
        this.$nextTick(() => {
          this.isPost = 'put'
          this.principalOptions = users.map(({id, realname}) => ({id, realname}))
          this.form.name = name;
          this.form.user_ids = users.map(item => item.id);
          // this.form.dept_ids = depts[0].id
          this.form.dept_ids = depts
          this.form.address1[0] = province_id;
          this.form.address1[1] = city_id
          this.form.address1[2] = county_id
          this.form.address = address
        })
      }

    },

    onConfirm() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.form.province_id = this.form.address1[0]
          this.form.city_id = this.form.address1[1]
          this.form.county_id = this.form.address1[2]
          this.form.dept_ids = this.form.dept_ids.map(item => item.id)
          // this.form.dept_ids = [this.form.dept_ids]
          this.handleAdd(this.form)
        }
      });
    },

    onCancel() {
      this.isPost = 'post'
      this.principalOptions = []
      this.cityName = ''
      this.form.dept_ids = null
      this.$refs.formRef.resetFields()
      this.visible = false;
    },

    async handleAdd(data) {
      this.loading = true
      const res = (await this.$http[this.isPost](`/warehouses${this.isPost === 'put' ? `/${this.id}` : ''}`, data)).data
      res.success ? this.$message.success(res.msg) : this.$message.error(res.msg)
      this.loading = false
      this.onCancel()
      this.$emit('reload')
    },

    async handleGetDeptList() {
      const res = await this.$http.get('/dept/getDeptList')
      if (res.data.code === 0) {
        this.deptOptions = this.$util.toTreeData(res.data.data, 'id', 'pid');

      } else {
        this.$message.error(res.data.msg);
      }
    },
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
}

.el-cascader--medium {
  width: 100%;
}
</style>
